<template>
    <div class="van-safe-area-top" />
    <NavBar
        :class="getNavBarCssClass()"
        class="xc-header"
        fixed
        placeholder
        safe-area-inset-top
        @click-right="rightClick"
    >
        <template #title>
            <slot name="title">
                <span class="title" :class="{'is-ios': isIos()}">{{ props.title }}</span>
            </slot>
        </template>
        <template #left>
            <slot name="left">
                <img v-if="props.leftArrow" class="left-arrow" src="@/assets/img/left-arrow.png" @click="leftClick" />
            </slot>
        </template>
        <template #right>
            <slot name="right"></slot>
        </template>
    </NavBar>
    <div
        :class="{'is-ios': isIos()}"
        class="bar"
    ></div>
</template>

<script lang="ts" setup>

/**
 * 用法
 * <Header title="品牌引爆" left-arrow @click-left="back" />
 * params:
 *     title: 页面名称
 *     left-arrow: 是否显示左边返回图标
 *     @click-left： 点击返回事件方法
 */

import {NavBar} from 'vant';
import {useRouter} from 'vue-router';
import {isIos} from '@/utils';

const props = defineProps({
    title: {
        type: String,
        require: true,
        default: ''
    },
    leftArrow: {
        type: Boolean,
        require: false,
        default: false
    },
    noBack: {
        type: Boolean,
        require: false,
        default: false
    },
    noBottomBorder: {
        type: Boolean,
        require: false,
        default: false
    },
    customLeftClick: {
        type: Function,
        require: false,
        default: null
    },
});

const $router = useRouter();
const emit = defineEmits(['click-left', 'click-right']);
const leftClick = () => {
    if (props.customLeftClick) {
        props.customLeftClick();
    } else if (props.noBack) {
        emit('click-left');
    } else {
        $router.back();
    }
};
const rightClick = () => {
    emit('click-right');
};

function getNavBarCssClass() {
    return {
        'no-bottom-border': props.noBottomBorder,
        'is-ios': isIos()
    };
}
</script>

<style lang="scss" scoped>
.title {
    font-family: PingFangSC-SNaNpxibold, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    text-align: center;
}

.left-arrow {
    width: 24px;
    height: 24px;
    user-select: none;
}

.no-bottom-border {
    :deep(.van-nav-bar) {
        &::after {
            border-bottom-width: 0;
        }
    }
}

.bar {
    height: 46px;
}

.xc-header {
    position: fixed !important;
    z-index: 999 !important;
}

// :deep([class~="van-hairline--bottom"])::after {
//     border-bottom-width: 0 !important;
// }

// iOS 的特殊样式处理
// prettier-ignore
.is-ios {
    height: 44PX;
    line-height: 44PX;

    :deep(.van-nav-bar__content) {
        height: 44PX;
    }

    :deep(.van-nav-bar__left) {
        padding-left: 12PX;
    }

    .title {
        font-weight: 600;
        font-size: 17PX;
        color: #333333;
        text-align: center;
        letter-spacing: -0.5PX;
    }

    .header-left-btn {
        font-weight: 600;
        color: #000;
        display: flex;
        align-items: center;
        font-size: 16PX;
        line-height: 1;

        .icon {
            width: 24PX;
            height: 24PX;
            margin-right: 3PX;
        }
    }

    .red {
        background: #ee4844 !important;

        :deep(.van-nav-bar) {
            background: #ee4844 !important;
        }

        :deep(.van-nav-bar__content) {
            background: #ee4844;
            color: #fff !important;

            .header-left-btn,
            .header-title,
            .right-btn {
                color: #fff !important;
            }
        }
    }

    .more-opr {
        width: 20PX;
    }
}
</style>
